<template>
  <a-modal
    :visible="visible"
    title="个人简介"
    :footer="null"
    @cancel="handleCancel"
    @update:visible="(val) => emit('update:visible', val)"
    width="550px"
    class="user-profile-modal"
  >
    <div class="user-profile">
      <div class="avatar-container">
        <a-avatar :size="120" :src="userList?.avatar" class="user-avatar" />
        <h2 class="username">{{ userList?.username }}</h2>
      </div>
      <div class="info-container">
        <div class="info-section">
          <h3 class="section-title">基本信息</h3>
          <div class="info-grid">
            <div class="info-item">
              <UserOutlined class="info-icon" />
              <span class="label">昵称：</span>
              <span class="value">{{ userList?.nickname }}</span>
            </div>
            <div class="info-item">
              <CalendarOutlined class="info-icon" />
              <span class="label">年龄：</span>
              <span class="value">{{ userList?.age }}</span>
            </div>
            <div class="info-item">
              <MailOutlined class="info-icon" />
              <span class="label">邮箱：</span>
              <span class="value">{{ userList?.email }}</span>
            </div>
            <div class="info-item">
              <PhoneOutlined class="info-icon" />
              <span class="label">手机：</span>
              <span class="value">{{ userList?.phone }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
import { computed, defineEmits, defineProps } from "vue";
import { useAuthStore } from "@/store/auth";
import {
  UserOutlined,
  MailOutlined,
  PhoneOutlined,
  CalendarOutlined,
} from "@ant-design/icons-vue";

const props = defineProps<{
  visible: boolean;
  userList: UserInfo | null;
}>();

const emit = defineEmits<{
  (e: "update:visible", visible: boolean): void;
}>();

const authStore = useAuthStore();
const user = computed(() => authStore.user);

const handleCancel = () => {
  emit("update:visible", false);
};

interface UserInfo {
  username: string;
  nickname: string;
  avatar: string;
  email: string;
  phone: string;
  age: number;
}
</script>

<style scoped>
.user-profile-modal :deep(.ant-modal-content) {
  border-radius: 12px;
  overflow: hidden;
}

.user-profile-modal :deep(.ant-modal-header) {
  border-bottom: none;
  padding: 24px 24px 0;
}

.user-profile {
  padding: 0 24px 24px;
}

.avatar-container {
  text-align: center;
  margin-bottom: 32px;
  padding: 24px 0;
  background: linear-gradient(to bottom, #e6f7ff, #ffffff);
  border-radius: 8px;
}

.user-avatar {
  border: 4px solid #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.username {
  margin-top: 16px;
  font-size: 24px;
  color: #1a1a1a;
  font-weight: 600;
}

.info-section {
  background: #fafafa;
  border-radius: 8px;
  padding: 20px;
}

.section-title {
  font-size: 16px;
  color: #1a1a1a;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.info-item {
  display: flex;
  align-items: center;
  padding: 8px;
  background: #fff;
  border-radius: 6px;
  transition: all 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
}

.info-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.info-icon {
  font-size: 16px;
  color: #1890ff;
  margin-right: 8px;
}

.label {
  color: #666;
  margin-right: 8px;
  font-size: 14px;
  min-width: 60px;
}

.value {
  color: #1a1a1a;
  font-weight: 500;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 添加响应式布局 */
@media (max-width: 480px) {
  .info-grid {
    grid-template-columns: 1fr;
  }
}
</style>
